<template>
	<div class="my-chart-configurations-animations" v-if="$store.chart.getTargetData">
		<el-collapse accordion class="m-t-10">
			<el-collapse-item title="变换" name="变换">
				<setting-item-box name="旋转°">
					<setting-item name="Z轴(平面) - 旋转">
						<el-input-number v-model="$store.chart.getTargetData.styles.rotateZ" :min="0" :max="360" />
					</setting-item>
					<setting-item name="X轴 - 旋转">
						<el-input-number v-model="$store.chart.getTargetData.styles.rotateX" :min="0" :max="360" />
					</setting-item>
					<setting-item name="Y轴 - 旋转">
						<el-input-number v-model="$store.chart.getTargetData.styles.rotateY" :min="0" :max="360" />
					</setting-item>
				</setting-item-box>
				<setting-item-box name="倾斜°">
					<setting-item name="X轴 - 倾斜">
						<el-input-number v-model="$store.chart.getTargetData.styles.skewX" :min="0" :max="360" />
					</setting-item>
					<setting-item name="Y轴 - 倾斜">
						<el-input-number v-model="$store.chart.getTargetData.styles.skewY" :min="0" :max="360" />
					</setting-item>
				</setting-item-box>
			</el-collapse-item>
			<el-collapse-item v-for="item in animations" :key="item.label" :title="item.label" :name="item.label">
				<n-grid :x-gap="6" :y-gap="10" :cols="3">
					<n-grid-item
						class="animation-item"
						:class="[
							activeIndex(childrenItem.value) && 'active',
							hoverPreviewAnimate === childrenItem.value && `animate__animated  animate__${childrenItem.value}`
						]"
						v-for="(childrenItem, index) in item.children"
						:key="index"
						@mouseover="hoverPreviewAnimate = childrenItem.value"
						@click="addAnimation(childrenItem)"
					>
						{{ childrenItem.label }}
					</n-grid-item>
				</n-grid>
			</el-collapse-item>
		</el-collapse>
		<n-button
			class="clear-btn m-t-10"
			:disabled="!$store.chart.getTargetData.styles.animations.length"
			@click="clearAnimation"
		>
			清 除 动 画
		</n-button>
	</div>
</template>

<script setup>
const animations = [
		{
			label: '强调动画',
			children: [
				{ label: '弹跳', value: 'bounce' },
				{ label: '闪烁', value: 'flash' },
				{ label: '放大缩小', value: 'pulse' },
				{ label: '放大缩小弹簧', value: 'rubberBand' },
				{ label: '左右晃动', value: 'headShake' },
				{ label: '左右扇形摇摆', value: 'swing' },
				{ label: '放大晃动缩小', value: 'tada' },
				{ label: '扇形摇摆', value: 'wobble' },
				{ label: '左右上下晃动', value: 'jello' }
			]
		},
		{
			label: '移入动画',
			children: [
				{ label: '渐显', value: 'fadeIn' },
				{ label: '向右进入', value: 'fadeInLeft' },
				{ label: '向左进入', value: 'fadeInRight' },
				{ label: '向上进入', value: 'fadeInUp' },
				{ label: '向下进入', value: 'fadeInDown' },
				{ label: '向右长距进入', value: 'fadeInLeftBig' },
				{ label: '向左长距进入', value: 'fadeInRightBig' },
				{ label: '向上长距进入', value: 'fadeInUpBig' },
				{ label: '向下长距进入', value: 'fadeInDownBig' },
				{ label: '旋转进入', value: 'rotateIn' },
				{ label: '左顺时针旋转', value: 'rotateInDownLeft' },
				{ label: '右逆时针旋转', value: 'rotateInDownRight' },
				{ label: '左逆时针旋转', value: 'rotateInUpLeft' },
				{ label: '右逆时针旋转', value: 'rotateInUpRight' },
				{ label: '弹入', value: 'bounceIn' },
				{ label: '向右弹入', value: 'bounceInLeft' },
				{ label: '向左弹入', value: 'bounceInRight' },
				{ label: '向上弹入', value: 'bounceInUp' },
				{ label: '向下弹入', value: 'bounceInDown' },
				{ label: '光速从右进入', value: 'lightSpeedInRight' },
				{ label: '光速从左进入', value: 'lightSpeedInLeft' },
				{ label: '光速从右退出', value: 'lightSpeedOutRight' },
				{ label: '光速从左退出', value: 'lightSpeedOutLeft' },
				{ label: 'Y轴旋转', value: 'flip' },
				{ label: '中心X轴旋转', value: 'flipInX' },
				{ label: '中心Y轴旋转', value: 'flipInY' },
				{ label: '左长半径旋转', value: 'rollIn' },
				{ label: '由小变大进入', value: 'zoomIn' },
				{ label: '左变大进入', value: 'zoomInLeft' },
				{ label: '右变大进入', value: 'zoomInRight' },
				{ label: '向上变大进入', value: 'zoomInUp' },
				{ label: '向下变大进入', value: 'zoomInDown' },
				{ label: '向右滑动展开', value: 'slideInLeft' },
				{ label: '向左滑动展开', value: 'slideInRight' },
				{ label: '向上滑动展开', value: 'slideInUp' },
				{ label: '向下滑动展开', value: 'slideInDown' }
			]
		}
	],
	hoverPreviewAnimate = ref('');

// * 选中的动画样式
function activeIndex(value) {
	const selectValue = $store.chart.getTargetData.styles.animations;
	if (!selectValue.length) return false;
	return selectValue[0] === value;
}

// * 清除动画
function clearAnimation() {
	$store.chart.getTargetData.styles.animations = [];
}

// * 新增动画，现只支持一种
function addAnimation(item) {
	$store.chart.getTargetData.styles.animations = [item.value];
}
</script>

<style lang="scss" scoped>
@include b('chart-configurations-animations') {
	padding: 0;
	.clear-btn {
		width: 100%;
	}
	.animation-item {
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		border-radius: 5px;
		border: 1px solid var(--el-border-color);
		transition: all var(--el-transition-duration-fast);
		&:hover,
		&.active {
			color: var(--el-color-primary);
			border: 1px solid var(--el-color-primary);
		}
	}
}
</style>
